<script setup>
import { ref, onMounted } from "vue";
import Sidebar from "@/components/Sidebar.vue";
import mapContainer from "@/components/map/index.vue";
import shpupload from "@/components/shpupload/index.vue";
import { useBasemapStore } from "@/stores/basemapStore";
import { useTreeStore } from "@/stores/treeStore";
import { useSidebarStore } from "@/stores/sidebarStore"; // 导入新的 store
import { point, line, polygon } from "@/utils/test";
import request from "@/utils/request";
import { watch } from "less";

const treeStore = useTreeStore();
const sidebarStore = useSidebarStore(); // 使用 sidebar store

const mapRef = ref(null);

const pointClick = async (type, city, name, bbox) => {
  console.log("点击图标点事件", type, city, name);
  if (type == "市") {
    // 默认加载全部
    // mapRef.value.showxzqByAttribute(type, name, "all",true, bbox);
    // 或者按需加载点
    const { data } = await request.post(`/zhsj/api/getfirestfloor2?shi=${name}`);
    let quList = []
    if (data) {
      data.forEach((item) => {
        if (item.hasOwnProperty('dqchildren')) {
          item.dqchildren.forEach((child) => {
            quList.push(child.typname)
          })
        }
      });
    }
    console.log('quList', quList)
    mapRef.value.showxzqByAttribute(
      type,
      name,
      quList,
      true,
      bbox
    );
  } else {
    // 当点击对象为区时，请求接口获取，当前区下所有的工程对应的点线面，可以通过重复调用封装的addProject
    if (type == "区") {
      treeStore.loadTreeData({
        shi: city,
        qu: name,
      },true);

      const { data } = await request.post(
        `/zhsj/api/selectslsjpage?pageindex=0&pagesize=20&city=${city}&xzq=${name}`
      );
      if (data.records.length) {
        data.records.forEach((item) => {
          console.log(item.gemo)
          // const geojson = JSON.parse(item.gemo)
          mapRef.value.addProject(item.gemo);
        });
      }
      // 实际传值为存储的geojson数据，是字符转
    }
    // 点击加载单个图层
    mapRef.value.showxzqByAttribute(type, city, [name], true, null);
  }
};

const mapzoomchange = (type, city) => {
  console.log("地图缩放事件触发，渲染对象", type, city);
  // 可以考虑在回退时清除掉地图上加载的工程点线面数据，也可以在其他地方调用清除工程中的点线面图层数据
  mapRef.value.clearProject();
  if (type == "省") {
    mapRef.value.showxzqByAttribute("省", "辽宁省", "all", false, null);
  } else {
    // 默认加载全部
    // mapRef.value.showxzqByAttribute(type, city, "all",false, bbox);
    // 或者按需加载点
    mapRef.value.showxzqByAttribute(
      type,
      city,
      ["铁西区", "和平区"],
      false,
      null
    );
  }
};

const projectclick = (attr) => {
  treeStore.baseTree = [
    {
      id: attr.project.proshi,
      label: attr.project.proshiName,
      children: [
        {
          id: attr.project.prodq,
          label: attr.project.prodqName,
          children: [
            {
              id: attr.project.proid,
              label: attr.project.proname,
            }
          ]
        }
      ]
    }
  ]
  sidebarStore.openSidebar()
  console.log("工程点击事件", attr);
};

const flytoshp = (extent) => {
  mapRef.value.flytoExtend(extent);
};

const shploaded = (data) => {
  console.log("shp解析完成，需要存储的结果为", data);
};

const uploadshow = ref(false); // 此处保证需要地图交互的组件要在map对象在初始化后显示，否则map对象为null
const mapLoaded = (map) => {
  // 地图加载后在处理事件
  const basemapStore = useBasemapStore(); // 创建 store 实例
  basemapStore.setBasemap(map); // 更新 Pinia 中的 basemap
  uploadshow.value = true;

  mapRef.value.showxzqByAttribute("省", "辽宁省", "all", false, null);
};
</script>

<template>
  <main>
    <sidebar 
      :is-collapsed="sidebarStore.isCollapsed" 
      @open="sidebarStore.openSidebar" 
      @toggle="sidebarStore.toggleSidebar" 
    />
    <mapContainer 
      ref="mapRef" 
      @pointclick="pointClick" 
      @mapLoaded="mapLoaded" 
      @mapzoomchange="mapzoomchange"
      @projectclick="projectclick"
    />
  </main>
</template>

<style lang="css" module>
main {
  width: 100%;
}
</style>
